<template>
  <div class="banner wd1200">
    <div class="slogan">
      <p>{{ title }}</p>
      <p class="location"><i class="el-icon-location-outline" />{{ companyNames }}</p>
    </div>
    <div class="search">
      <!-- <img src="../../assets/images/busNeighbors/echarts.png" alt=""> -->
      <v-charts v-loading="loading1" :data="registerSelect" class="img" />
    </div>
  </div>
</template>
<script>
import vCharts from '@/views/busNeighbors/detail/existing/barCharts.vue'
export default {
  components: {
    vCharts
  },
  data() {
    return {
      title: '',
      registerSelect: [],
      params: {},
      apiCollection: null,
      companyNames: '',
      searchApi: []
    }
  },
  async mounted() {
    this.apiCollection = require('@/api/busNeighbors')
    this.companyName = this.$route.query.companyName
    this.params = JSON.parse(this.$route.query.data).params
    this.title = JSON.parse(this.$route.query.data).title
    console.log(this.params)
    this.companyNames = this.$route.query.companyNames
    this.searchApi = JSON.parse(this.$route.query.data).searchApi
    if (this.title === '参保人员') {
      const res = await this.apiCollection['annual_report_social_security_chart']({
        endDate: this.params.endDate,
        lyComType: this.params.lyComType,
        lyId: this.params.lyId
      })
      this.registerSelect = res.data.content.map(item => {
        return {
          insuranceRange: item.insuranceRange,
          companyCount: item.companyCount
        }
      })
      if (!this.registerSelect.map(item => item.insuranceRange).includes('1000万以上')) {
        this.registerSelect.push({
          insuranceRange: '1000万以上',
          companyCount: 0
        })
      }
    } else if (this.title === '招聘企业数') {
      const res = await this.apiCollection['build_company_employment_trend_chart_date']({
        endDate: this.params.endDate,
        shpId: this.params.shpId
      })
      this.registerSelect = res.data.content.map(item => {
        return {
          insuranceRange: item.month,
          companyCount: item.jobCount
        }
      })
    } else if (this.title === '知识产权拥有企业') {
      const res = await this.apiCollection['build_intellectual_property_trend']({
        endDate: this.params.endDate,
        lyComType: this.params.lyComType,
        lyId: this.params.lyId
      })
      this.registerSelect = res.data.content.map(item => {
        return {
          insuranceRange: item.month,
          companyCount: item.jobCount
        }
      })
    } else if (this.$route.meta.title === '知识产权') {
      const res = await this.apiCollection['intellectual_property_chart']({
        endDate: this.params.endDate,
        lyComType: this.params.lyComType,
        lyId: this.params.lyId
      })
      this.registerSelect = res.data.content.map(item => {
        return {
          insuranceRange: item.tType,
          companyCount: item.count
        }
      })
    } else if (this.$route.meta.title === '发布招聘岗位') {
      const res = await this.apiCollection['company_employment_trend_chart']({
        endDate: this.params.endDate,
        lyComType: this.params.lyComType,
        lyId: this.params.lyId
      })
      this.registerSelect = res.data.content.map(item => {
        return {
          insuranceRange: item.MONTH,
          companyCount: item.JOB_COUNT
        }
      })
    } else {
      let res1 = null
      if (this.searchApi && this.searchApi[0].api) {
        res1 = await this.apiCollection[(this.searchApi && this.searchApi[0].api)](this.searchApi && this.searchApi[0].params)
      } else {
        res1 = await this.apiCollection['company_base_list_by_capital_count']({
          companyMajorType: this.params.companyMajorType,
          establishDate: this.params.endDate,
          lyComType: this.params.lyComType,
          lyId: this.params.lyId
        })
      }
      this.registerSelect = [{
        insuranceRange: '500万以下',
        companyCount: res1.data.content.filter(item => item.capitalRange === '500万以下').reduce((total, num) => total + (num.companyCount || num.total), 0)
      }, {
        insuranceRange: '500-1000万',
        companyCount: res1.data.content.filter(item => item.capitalRange1 === '500-1000万').reduce((total, num) => total + (num.companyCount || num.total), 0)
      }, {
        insuranceRange: '1000万-2000万',
        companyCount: res1.data.content.filter(item => item.capitalRange2 === '1000万-2000万').reduce((total, num) => total + (num.companyCount || num.total), 0)
      }, {
        insuranceRange: '2000万以上',
        companyCount: res1.data.content.filter(item => item.capitalRange3 === '2000万以上').reduce((total, num) => total + (num.companyCount || num.total), 0)
      }]
      if (res1.data && res1.data.content.length > 0 && res1.data.content[0] && Object.keys(res1.data.content[0]).length <= 2) {
        this.registerSelect.forEach(item => {
          if (item.label === res1.data.content[0]['capitalRange']) {
            this.$set(item, 'number', res1.data.content[0].companyCount || res1.data.content[0].total)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.banner{
  height: 318px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent !important;
}
.slogan {
  flex: 1;
  height: 100%;
  color: #fff;
  font-size: 42px;
  color: #ffffff;
  text-align: start;
  font-weight: 400;
  line-height: 55px;
  margin: 84px 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  p {
    margin: 0;
  }
  .location {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    font-family: Microsoft YaHei, Microsoft YaHei;
  }
}
.search {
  flex: 1;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: flex-end;
  .img{
    width: 600px;
    height: 280px;
    position: relative;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }
  .box {
    display: flex;
    .search-bt {
      width: 120px;
      height: 53px;
      background: #fa8901;
      border-radius: 0px 4px 4px 0px;
      font-size: 22px;
      color: #ffffff;
      font-weight: 400;
      text-align: center;
      line-height: 53px;
      letter-spacing: 2px;
    }
  }
  .advanced-search {
    width: 32px;
    height: 40px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    margin-left: 12px;
    cursor: pointer;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
  }
}
::v-deep .barCharts{
  height: 270px !important;
}
</style>
